<template>
  <div class="guidang">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection' }">干部选任</el-breadcrumb-item>
      <el-breadcrumb-item>归档情况</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxnoborder">
      <div :style="'height:'+tableHeight+'px'">
        <el-scrollbar style="height: calc(100% + 16px); margin: 8px;">
          <div style="margin:15px;">
            <h3>基本信息</h3>
            <div class="item">
              <div class="item-left">姓名</div>
              <div class="item-right">{{fdata.realName}}</div>
            </div>
            <div class="item">
              <div class="item-left">目前单位</div>
              <div class="item-right">{{fdata.candidateUnit}}</div>
            </div>
            <div class="item">
              <div class="item-left">目前职务</div>
              <div class="item-right">{{fdata.currentJob}}</div>
            </div>
            <div class="item">
              <div class="item-left">目前职级</div>
              <div class="item-right">{{fdata.currentLevel}}</div>
            </div>
            <div class="item">
              <div class="item-left">选任岗位单位</div>
              <div class="item-right">{{fdata.unitName}}</div>
            </div>
            <div class="item">
              <div class="item-left">选任岗位职务</div>
              <div class="item-right">{{fdata.jobName}}</div>
            </div>
            <div class="item">
              <div class="item-left">选任岗位职级</div>
              <div class="item-right">{{fdata.jobLevel}}</div>
            </div>
            <div class="line" style="margin-bottom:20px;"></div>
            <table class="mytable1" cellspacing="0" cellpadding="0">
              <tr>
                <th width='200'>类型</th>
                <th width='100'>编码</th>
                <th width='200'>姓名</th>
                <th width='300'>身份证号</th>
                <th width='300'>职务</th>
              </tr>
            </table>
            <div class="line"></div>
            <el-button type="primary" @click="backList" style="margin:15px;">返回列表</el-button>
          </div>
        </el-scrollbar>
      </div>
    </section>
  </div>
</template>

<script>
import gd from '../../assets/icon_selection_gd0.png'
import gd2 from '../../assets/icon_selection_gd2.png'
import gd4 from '../../assets/icon_selection_gd4.png'
export default {
  name: 'guidang',
  data () {
    return {
      tableHeight: 100,
      allStatusid: 0,
      allStatus: '',
      status: '',
      status2: '',
      status3: '',
      status4: '',
      fs: 0,
      fs2: 0,
      fs3: 0,
      fs4: 0,
      personId: '',
      fdata: {}
    }
  },
  methods: {
    getGdData (pid) {
      let that = this
      const loading = that.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let url = that.$http.defaults.selectionAPI + 'api/selection/personfiled/getPersonFiledInfo'
      // console.log(url)
      that.$http.get(url, {
        params: {
          personId: this.personId
        }
      }).then(res => {
        console.log('get finish data succ:', res)
        if (res.data.success === true) {
          loading.close()
          let arr = {}
          let rs = res.data.result
          arr = rs
          // 归档环节状态
          if (rs.stateFiled && rs.stateFiled === 0) {
            that.allStatusid = 0
            that.allStatus = gd
          } else if (rs.stateFiled && rs.stateFiled === 2) {
            that.allStatusid = 2
            that.allStatus = gd2
          } else if (rs.stateFiled && rs.stateFiled === 4) {
            that.allStatusid = 4
            that.allStatus = gd4
          } else {
            that.allStatusid = 0
            that.allStatus = gd
          }
          // 干部选任档案
          if (rs.filedTime1) {
            that.status = gd2
            that.fs = 1
          } else {
            that.status = gd
            that.fs = 0
          }
          // 干部监督信息档案
          if (rs.filedTime2) {
            that.status2 = gd2
            that.fs2 = 1
          } else {
            that.status2 = gd
            that.fs2 = 0
          }
          // 干部档案
          if (rs.filedTime3) {
            that.status3 = gd2
            that.fs3 = 1
          } else {
            that.status3 = gd
            that.fs3 = 0
          }
          // 文书档案
          if (rs.filedTime4) {
            that.status4 = gd2
            that.fs4 = 1
          } else {
            that.status4 = gd
            that.fs4 = 0
          }
          that.fdata = arr
        } else {
          loading.close()
          that.$message({
            message: '数据获取失败',
            type: 'error'
          })
        }
      })
    },
    handleImgClick () {
      console.log('img click')
      let that = this
      const loading = that.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let url = that.$http.defaults.selectionAPI + 'api/selection/personfiled/updatePersonFiledInfo'
      // console.log(url)
      let filed = 0
      if (that.fs) {
        filed = 0
      } else {
        filed = 1
      }
      that.$http.post(url, {
        personId: that.personId,
        filedType: 1,
        filed: filed
      }).then(res => {
        console.log('归档succ:', res)
        if (res.data.success === true) {
          loading.close()
          that.$message({
            message: '操作成功',
            type: 'success'
          })
          that.getGdData()
        } else {
          loading.close()
          that.$message({
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    handleImgClick2 () {
      console.log('img2 click')
      let that = this
      const loading = that.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let url = that.$http.defaults.selectionAPI + 'api/selection/personfiled/updatePersonFiledInfo'
      // console.log(url)
      let filed = 0
      if (that.fs2) {
        filed = 0
      } else {
        filed = 1
      }
      that.$http.post(url, {
        personId: that.personId,
        filedType: 2,
        filed: filed
      }).then(res => {
        console.log('归档succ:', res)
        if (res.data.success === true) {
          loading.close()
          that.$message({
            message: '操作成功',
            type: 'success'
          })
          that.getGdData()
        } else {
          loading.close()
          that.$message({
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    handleImgClick3 () {
      console.log('img3 click')
      let that = this
      const loading = that.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let url = that.$http.defaults.selectionAPI + 'api/selection/personfiled/updatePersonFiledInfo'
      // console.log(url)
      let filed = 0
      if (that.fs3) {
        filed = 0
      } else {
        filed = 1
      }
      that.$http.post(url, {
        personId: that.personId,
        filedType: 3,
        filed: filed
      }).then(res => {
        console.log('归档succ:', res)
        if (res.data.success === true) {
          loading.close()
          that.$message({
            message: '操作成功',
            type: 'success'
          })
          that.getGdData()
        } else {
          loading.close()
          that.$message({
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    handleImgClick4 () {
      console.log('img4 click')
      let that = this
      const loading = that.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let url = that.$http.defaults.selectionAPI + 'api/selection/personfiled/updatePersonFiledInfo'
      // console.log(url)
      let filed = 0
      if (that.fs4) {
        filed = 0
      } else {
        filed = 1
      }
      that.$http.post(url, {
        personId: that.personId,
        filedType: 4,
        filed: filed
      }).then(res => {
        console.log('归档succ:', res)
        if (res.data.success === true) {
          loading.close()
          that.$message({
            message: '操作成功',
            type: 'success'
          })
          that.getGdData()
        } else {
          loading.close()
          that.$message({
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    backList () {
      this.$router.replace('/selection')
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    }
  },
  mounted () {
    // params
    this.personId = this.$route.params.id
    // this.personId = 35
    // guidang data
    this.getGdData()
    // resize
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>

<style>
.guidang .wboxnoborder .el-table{
  border: #95B8E7 solid 1px;
}
.guidang .wboxnoborder .el-table th{
  font-weight: normal;
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  text-align: center;
  border-right: #95B8E7 solid 1px;
  border-bottom: #95B8E7 solid 1px;
  min-height: 30px;
  line-height:30px;
}
.guidang .wboxnoborder .el-table td, .el-table th{
  padding:0;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体';
  text-align: center;
}
.guidang .el-table__row{
  height: 50px;
}
</style>
<style scoped>
.guidang {
  width: 100%;
}
.tit {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-weight: bolder;
  margin:0 10px;
}
.tit2 {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin:0 10px;
}
.tit2-left {
  font-weight: bolder;
}
.tit2-img {
  width: 30px;
  height: 30px;
}
.ir2-img {
  width: 30px;
  height: 30px;
}
.item {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}
.item-left {
  width: 150px;
  text-align: right;
}
.item-right {
  width: 60%;
  margin-left:15px;
  font-weight: bolder;
}
.item-right2 {
  width: 60%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-left: 15px;
}
.item-right2-con {
  margin-left: 10px;
  float:left;
  line-height: 20px;
}
.line {
  width: 100%;
  height: 1px;
  background-color: #74A6CC;
  margin-top: 20px;
  overflow: hidden;
}
.guidang .wboxnoborder {
  padding: 0;
  width: 100%;
  background-color: #fff;
  margin: 0 10px;
  overflow: hidden;
}
</style>
